<template>
  <div class="rednest">
    <el-row :gutter="1">
      <el-col :span="18">
        <ul class="topicContentUl" style="margin: 0px;padding: 0px">
          <li v-for="(topicItem,index) in topicContent" :key="index">
            <div class="grid-content bg-purple">
              <h2>{{topicItem.title}}</h2>
              <p>{{topicItem.content}}</p>
              <p class="authors">
                <img :src='topicItem.url'>
                <span class="author">{{topicItem.author}}</span>
                <span>{{topicItem.time}}</span>
                <router-link to="/topicDetails" class="discuss">讨论</router-link>
              </p>
            </div>
          </li>
        </ul>
        <div style="clear:both;"></div>
     </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>今日推荐</p>
            <ul class="newsSidebarUl">
              <li v-for="topicItem in topicSecommend" :key="topicItem.url">
                <span>{{topicItem.url}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div>
        <div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>话题大牛</p>
            <ul class="newsSidebarUl">
              <li v-for="(topicItem,index) in topicSuperhuman" :key="index">
                <div>
                  <img :src='topicItem.img'>
                  <span>{{topicItem.author}}</span>
                  <span>{{topicItem.job}}</span>
                </div>
                <span>{{topicItem.motto}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
      name: "topic",
      data(){
          return{
            topicContent:[],
            topicSecommend:[
              {url:'推荐1'},
              {url:'推荐2'}
            ],
            topicSuperhuman:[
              {
                img:'img',
                author:'author',
                job:'job',
                motto:'motto'
              },
              {
                img:'img',
                author:'author',
                job:'job',
                motto:'motto'
              }
            ]
          }
      },
      methods:{
        getTopicContent(){
          this.list = [];
          for(let i = 1 ;i <11 ;i ++){
            let list = [ {
              title:'titletitletitletitletitletitleti' +
                'tletitletitletitletitletitletitleti' +
                'tletitletitletitletitletitletitleti' +
                'tletitletitletitletitletitletitleti' +
                'tletitletitletitletitle',
              content:'contentcontentcontentcontent' +
                'contentcontentcontentcontentcontentco' +
                'ntentcontentcontentcontentcontentcont' +
                'entcontentcontentcontentcontentconte' +
                'ntcontentcontentcontentcontent',
              url:'url',
              author:'author',
              time:'time',
            },];
            this.topicContent=this.topicContent.concat(list)
          }
        }
      },
      created () {
        this.getTopicContent();
      },
    }
</script>

<style scoped>
  .grid-content{
    text-align: left;
    padding:0px 4%;
    word-wrap:break-word
  }
  .discuss{
    float: right;
    color: black;
    text-decoration: none;
  }
  .authors p,span{
    padding: 0px 1%;
  }
  .author{
    border-right: 1px solid #a09b9a;
  }
</style>
